<template>
    <div>
        <div align="right" style="margin-bottom: 20px">
            <el-button type="primary" size="mini" @click="backHome">返回主页</el-button>
        </div>
        <el-row>
            <el-col :span="15">
                <div class="details_title">环境查看</div>
            </el-col>
        </el-row>
        <el-divider></el-divider>

        <el-row style="margin-bottom: 20px">
            <el-col :span="8">
                <div class="son_title">任务查看</div>
            </el-col>
            <el-col :span="8">
                <el-date-picker v-model="barChartDate" size="mini"></el-date-picker>
            </el-col>
            <el-col :span="8">
                <el-button size="mini" @click="initTarget">查询</el-button>
            </el-col>
        </el-row>

        <el-table :data="taskTableData" border>
            <el-table-column prop="indicator" label="指标1" align="center"></el-table-column>
            <el-table-column prop="indicator_type" label="指标2" ></el-table-column>

            <el-table-column align="center">
                <template slot-scope="scope">
                    <el-button @click="showTarget(scope.$index)" size="mini">查看</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-divider></el-divider>
<!--        <el-dialog :visible.sync="showDialog" :title="dialogTitle" width="50%">-->
        <el-card style="width: 98%">
            <el-form label-width="150px">
                <el-form-item label="检测指标">{{dialogData.target}}</el-form-item>
                <el-form-item label="当前生长周期">{{dialogData.nowPeriod}}</el-form-item>
                <el-form-item label="详细时间周期">{{dialogData.timeSlot}}</el-form-item>
                <el-form-item label="计划采集次数">{{dialogData.planningCollectionTimes}}</el-form-item>
                <el-form-item label="实际采集次数">{{dialogData.actualCollectionTimes}}</el-form-item>
                <el-form-item label="是否完成采集">{{dialogData.isCollect}}</el-form-item>
            </el-form>
        </el-card>
<!--        </el-dialog>-->
    </div>
</template>

<script>
    export default {
        name: "task-select",
        data(){
            return{
                barChartDate: new Date(),
                taskTableData:[{
                  collect_number_now: 0,
                  collect_number_sum: 6,
                  equipment_number: 1,
                  id: 1,
                  indicator: "土壤EC(10厘米)",
                  indicator_type: "环境指标",
                  responsible_party: "\"雪川\"",


                }],
                // showDialog: false,
                dialogTitle: '',
                dialogData:{
                    target: '土壤ph',
                    nowPeriod : '生长期',
                    timeSlot: '2021-3-15----2021-3-25',
                    planningCollectionTimes: '1',
                    actualCollectionTimes: '5',
                    isCollect: '采集完成'
                }
            }
        },
        mounted() {

        },
        methods: {
            showTarget(index){
              let form = new FormData;
                //this.dialogTitle = this.taskTableData[index].target;
                // console.log(this.dialogTitle)
               form.append('id',this.taskTableData[index].id)
                this.$http.post('/gengyun/PlanIndicator/find',form).then((res)=>{
                  console.log(res)
                  this.dialogData.target = res.data.data.indicator

                }).catch()
                // this.showDialog = true;
            },
            initTarget(){
                //let form = new FormData;
                // form.append('date',this.barChartDate.toLocaleDateString())
                this.$http.post('/gengyun/PlanIndicator/all').then((res)=>{

                    console.log(res)
                  //let data=[]
                  this.taskTableData = res.data.data
                    // console.log(plans)
                    // for (let i in plans){
                    //
                    //         this.$set(this.taskTableData.target,i,plans[i].indicator)
                    //
                    // }
                })
            },
            backHome(){
                this.$router.push('/home/bar')
            }
        }
    }
</script>

<style scoped>

</style>
